<template>
    <div class="RecommendSongs">
        <h1>
            <router-link :to="{name:'Songs'}">
                推荐歌单
                <i class="fa fa-chevron-right"></i>
            </router-link>
        </h1>
        <el-empty v-if="Url!==''?false:true" description="未能拿到数据,请登录后重试"></el-empty>
        <article v-else-if="Url===''?false:true">
            <router-link tag="div" :to="{name:'dailySongs'}">
                <span>
                    <img :src="Url">
                    <i class="black">根据您的音乐口味每日更新</i>
                    <i class="fa fa-play"></i>
                </span>
                <p>每日歌曲推荐</p>
            </router-link>
            <div v-for="{id,name,picUrl,playcount,item} in recommend" :key="item">
                <span>
                    <router-link :to="{name:'MusicList',params:{id:id}}">
                        <img :src="picUrl">
                        <i class="black"></i>
                        <i class="fa fa-play-circle-o">{{playcount}}</i>
                        <i class="fa fa-play"></i>
                    </router-link>
                </span>
                <p>{{name}}</p>
            </div>
        </article>
    </div>
</template>

<script>
import {
    recommendR,
    recommendS
} from '@/library/api/api'
export default {
    name:'RecommendSongs',
    data() {
        return {
            recommend:{},
            playcount:{},
            Url:""
        }
    },
    methods:{
        resource() {
            recommendR({
                data:{
                    cookie:localStorage.cookie
                }
            })
            .then(res=>{
                this.recommend = res.recommend.map(item=>{
                    return item
                }),
                this.playcount = res.recommend.map(item=>{
                    if(item.playcount>10000000) {
                        return item.playcount = parseInt((item.playcount/10000000)) +" 亿"
                    }else if(item.playcount>1000) {
                        return item.playcount = parseInt((item.playcount/10000)) +" 万"
                    }
                    return item.playcount
                })
                
                if (this.recommend.length > 9) {
                    this.recommend.length = 9
                }
            })
        },
        songs() {
            recommendS({
                data:{
                    cookie:localStorage.cookie
                }
            }).then(res=>{
                this.Url = res.data.dailySongs[0].al.picUrl
            })
        }
    },
    created() {
        this.resource()
        this.songs()
    }
}
</script>

<style lang="scss" scoped>
@import './RecommendSongs.scss'
</style>
